<%@ page contentType="text/html" %>
<%@ page pageEncoding="UTF-8" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt" %>

<%@ include file="header.jsp" %>
<!--[if IE]><script language="javascript" type="text/javascript" src="../../js/flot/excanvas.js"></script><![endif]-->
<script language="javascript" type="text/javascript" src="../../js/flot/jquery.flot.js"></script>
<script language="javascript" type="text/javascript" src="../../js/ajaxSubmitVote.js"/>
<script>
	$(function() {
		$( "#progressbar" ).progressbar({
			value: 100
		});
	});
</script>



<c:choose>
<c:when test="${hasError == true}">
		<div class="ui-widget">
			<div class="ui-state-error ui-corner-all" style="padding: 0 .7em;"> 
				<p><span class="ui-icon ui-icon-alert" style="float: left; margin-right: .3em;"></span> 
				<strong>Error:</strong> <c:out value="${error}"></c:out>.</p>
			</div>
		</div>
</c:when>
</c:choose>
<div>
	<h3>You are playing in the category "<c:out value="${subscription.room.category.name}"/>"</h3>
	<div id="timeremaining">
		<p id="parrafo"><c:out value="${timeremaining}"/></p>
	</div>
	<div id="timeremaining2" style="display:none;">
		<p id="parrafo2"><c:out value="${totaltime}"/></p>
	</div>
	<p title="100% is the best"><strong>Ranking Position : <span id="rankpos"><c:out value="${userRanking}"/></span>% </strong></p>
	<div id="progressbar"></div>
	<p><strong>Points : <span id="points"><c:out value="${totalPoints}"/></span> </strong></p>
	<br/>
	
	
<iframe name="graphics" src="roomVotesFrame.jsp?id=<c:out value="${subscription.room.id}"/>" width="100%" height="100%" frameborder=0 scrolling="no">
  <p>Your browser does not support iframes. You need to update your browser to play.</p>
</iframe>
<div class="downloadCSV">
			<a href="../csv/getSubscriptionHistory?id=<c:out value="${subscription.id}"/>">
				Download the room history<img src="../../resources/csv.png" title="Download csv file"/>
			</a>
</div>
	<div id="votingForm">
		<div id="innerVotingForm">
		<p> <c:out value="${question.question}"/> </p>
		<p id="qid"><c:out value="${question.id}"/></p>

		<p id="usuarioid"><c:out value="${user.id}"/></p>
		<form class="botones">
	        <input type="radio" name="answer" value="A" id="answerA" <c:out value="${selectedA}"/>   <c:out value="${disabled}"/>> <c:out value="${question.answerA}"/> <br/>
	        <input type="radio" name="answer" value="B" id="answerB" <c:out value="${selectedB}"/> <c:out value="${disabled}"/>> <c:out value="${question.answerB}"/> <br/>
	        <input type="hidden" name="subscription" id="subscription" value="<c:out value="${subscription.id}"/>"/>
	        <span id="voteBtn"><input id="vote" value="Vote" type="button" <c:out value="${disabled}"/> onClick="ajaxVote()" /><span>
		</form>
		<br/>

		<%
		String imagen;
		if((imagen=(String)request.getAttribute("imagen")) !=null ){
		%> 
			<div id="lastanswertext">The result of the last round was:</div>
			<div id="lastanswer"><%= imagen %></div>
		<%
		} else {
		%>
			<div id="lastanswertext">The result of the last round was:</div>
			<div id="lastanswer"></div>
		<%
		}
		%>
		</div>
	</div>
<script language="javascript" type="text/javascript" src="../../js/timer.js"></script>
<script language="javascript">
	terminoRound()
</script>
<%@ include file="footer.jsp" %>

